<template>
  <div class="box">
    <headTitle :Crumbs="Crumbs" class="TitleHead"></headTitle>
    <div class="MpaPosition" v-show="mapShow">
      <div class="title">
        坐标选择
        <span class="el-icon-close" @click="CloseMap"></span>
      </div>
      <MpaPosition @position="position"></MpaPosition>
    </div>
    <div class="container">
      <div>
        <div class="submenu">
          <div class="title">{{EQName}}</div>
          <el-tabs v-model="activeName2" type="card" @tab-click="tabList">
            <el-tab-pane :label="Crumbs.tab_title" name="ElectricBox">
              <div class="equipment">
                <div class="operation">
                  <input type="text" v-model="search" placeholder="请输入搜索内容" />
                  <el-button @click="search_query">搜索</el-button>
                  <el-button @click="New_electric_box_equipment">新建设备</el-button>
                  <el-button @click="new_Device_box">新建模板</el-button>
                </div>
                <el-tabs v-model="tab_activeName" @tab-click="tab_handleClick">
                  <el-tab-pane label="设备详情" name="device_details">
                    <!-- 电箱设备详情 抽成组件再引入 -->
                    <div class="Roll">
                      <el-table :data="Electric_box_equipment_table" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="100px"></el-table-column>
                        <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>

                        <el-table-column
                          label="单灯控制器列表"
                          show-overflow-tooltip
                          v-if="id==1 && path!='/BroadcastingEquipment'"
                        >
                          <template slot-scope="scope">
                            <span
                              v-for="(item,index) in scope.row.lampList"
                              :key="index"
                            >{{item.name}} ; &nbsp;</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="气象传感器"
                          v-if="id==1 && path!='/BroadcastingEquipment' "
                          show-overflow-tooltip
                        >
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.weatherSensorList"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="显示屏列表"
                          show-overflow-tooltip
                          v-if="id==1 && path!='/BroadcastingEquipment'"
                        >
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.screenList"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label=" WiFi"
                          v-if="id==1 && path!='/BroadcastingEquipment'"
                        >
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.wifiList"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>

                        <el-table-column label="音柱" v-if="id==1 && path=='/BroadcastingEquipment'">
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.soundPostList"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="IP对讲"
                          v-if="id==1 && path=='/BroadcastingEquipment'"
                        >
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.talkDevList"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="IP中控台"
                          v-if="id==1 && path=='/BroadcastingEquipment'"
                        >
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.centerControlList"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>

                        <el-table-column prop="lng" label="经度"></el-table-column>
                        <el-table-column prop="lat" label="纬度"></el-table-column>
                        <el-table-column label=" 回路 " show-overflow-tooltip v-if="id==0">
                          <template slot-scope="scope">
                            <div
                              v-for="(item,index) in scope.row.elecLoops"
                              :key="index"
                            >{{item.name}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="pwSource" label="进电来源"></el-table-column>
                        <el-table-column prop="inputVolt" label="输入电压(V)"></el-table-column>
                        <el-table-column prop="maxPw" label="最大功率(W)"></el-table-column>
                        <el-table-column prop="maxLoopNum" label="最大回路数(条)"></el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <i
                              class="el-icon-delete"
                              @click="Device_deletion(scope.row)"
                              title="删除"
                            ></i>
                            <i @click="put_EQ(scope.row)" class="el-icon-edit" title="修改"></i>
                          </template>
                        </el-table-column>
                        <!-- <div v-if="path=='/BroadcastingEquipmen'">
                         <el-table-column prop="name" label="主控台" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="name" label="IP音响" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="name" label="对讲设备" show-overflow-tooltip></el-table-column>
                        </div>-->
                      </el-table>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="模板详情" name="strategy_details">
                    <!-- 电箱模板详情 抽成组件再引入 -->
                    <div class="Roll">
                      <el-table :data="Electric_box_table" border style="width: 100%">
                        <el-table-column type="index" width="100" label="序号"></el-table-column>
                        <el-table-column prop="name" label="电箱模板名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="maxLoopNum" label="最大回路数(条)"></el-table-column>
                        <el-table-column prop="inputVolt" label="输入电压(V)"></el-table-column>
                        <el-table-column prop="maxPw" label="最大功率(W)"></el-table-column>
                        <el-table-column prop="dimL" label="长(cm)"></el-table-column>
                        <el-table-column prop="dimW" label="宽(cm)"></el-table-column>
                        <el-table-column prop="dimH" label="高(cm)"></el-table-column>
                        <!-- 新增 -->
                        <!-- <el-table-column prop="address" label="通讯地址"></el-table-column> -->
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <i
                              class="el-icon-delete"
                              @click="Device_deletion(scope.row)"
                              title="删除"
                            ></i>
                            <i @click="put_tpl(scope.row)" title="修改" class="el-icon-edit"></i>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[5,10]"
                  :page-size="size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="回路列表"
              name="ElectricBox1"
              v-if="id==0&& path!='/BroadcastingEquipment'"
            >
              <div class="Roll">
                <table-list :EQU_Type="loop_Type"></table-list>
              </div>
            </el-tab-pane>
            <el-tab-pane label="单灯控制器列表" name="lamp" v-if="id!==0&& path!='/BroadcastingEquipment'">
              <div class="Roll">
                <table-list :EQU_Type="lamp_Type"></table-list>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="气象传感器列表"
              name="Meteorological"
              v-if="id!==0&& path!='/BroadcastingEquipment'"
            >
              <div class="Roll">
                <table-list :EQU_Type="ML_Type"></table-list>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="显示屏分组列表"
              name="screen"
              v-if="id!==0&& path!='/BroadcastingEquipment'"
            >
              <div class="Roll">
                <table-list :EQU_Type="screen_Type"></table-list>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="WIFI-AP列表"
              name="wifi"
              v-if="id!==0&& path!='/BroadcastingEquipment'"
            >
              <div class="Roll">
                <table-list :EQU_Type="wifi_Type"></table-list>
              </div>
            </el-tab-pane>
            <el-tab-pane label="摄像头" name="camera" v-if="id!==0&& path!='/BroadcastingEquipment'">
              <div class="Roll">
                <table-list :EQU_Type="camera_Type"></table-list>
              </div>
            </el-tab-pane>

            <el-tab-pane label="主控台" name="Console" v-if="path=='/BroadcastingEquipment'">
              <div class="Roll">
                <table-list :EQU_Type="Console_Type" v-if="isRouterAlive" ref="getTable"></table-list>
              </div>
            </el-tab-pane>

            <el-tab-pane label="音响列表" name="sound" v-if="path=='/BroadcastingEquipment'">
              <div class="Roll">
                <table-list :EQU_Type="sound_Type" v-if="isRouterAlive" ref="getTable"></table-list>
              </div>
            </el-tab-pane>
            <el-tab-pane label="对讲列表" name="IP" v-if="path=='/BroadcastingEquipment'">
              <div class="Roll">
                <table-list :EQU_Type="IP_Type" v-if="isRouterAlive" ref="getTable"></table-list>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!-- 分页 -->
        </div>
      </div>
    </div>
    <!-- 设备修改 -->
    <transition name="el-fade-in-linear">
      <div class="Mask" v-if="update_box_EQ">
        <div class="New_template">
          <div class="tips">
            {{Establish}}
            <i class="el-icon-close" @click="Close_update()"></i>
          </div>
          <ul class="Roll">
            <li>
              <span>名称</span>
              <input type="text" v-model="box_template.name" />
            </li>
            <!-- <li>
              <span>设备厂商</span>
              <input type="text" v-model="box_template.vendorDev.name" disabled />
            </li>-->
            <li v-show="Distinguish != 0 ? true:false">
              <span>供电来源</span>
              <input type="text" v-model="box_template.pwSource" />
            </li>
            <li v-show="Distinguish != 0 ? true:false" class="map">
              <span>经度</span>
              <input type="number" v-model="box_template.lng" />
              <!-- <label class="el-icon-location-information" @click="map"></label> -->
            </li>
            <li v-show="Distinguish != 0 ? true:false" class="map">
              <span>纬度</span>
              <input type="number" v-model="box_template.lat" />
              <!-- <label class="el-icon-location-information" @click="map"></label> -->
            </li>

            <li v-show="path=='/LampEquipmentLibrary'?false:true">
              <span>归属建筑</span>
              <el-select v-model="box_template.buildType" placeholder="请选择">
                <el-option
                  v-for="item in Architecture"
                  :key="item.buildType"
                  :label="item.name"
                  :value="item.buildType"
                ></el-option>
              </el-select>
            </li>
            <li>
              <span>最大回路数</span>
              <input type="number" v-model="box_template.maxLoopNum" />
            </li>
            <li>
              <span>输入电压</span>
              <input type="number" v-model="box_template.inputVolt" />
            </li>
            <!-- <li>
                <span>最低温度</span>
                <input type="number" v-model="box_template. lowWorkTemp" />
              </li>
               <li>
                <span>最高温度</span>
                <input type="number" v-model="box_template.highWorkTemp" />
              </li>
              <li>
                <span>最低湿度</span>
                <input type="number" v-model="box_template.lowWorkHomidity" />
              </li>
              <li>
                <span>最高湿度</span>
                <input type="number" v-model="box_template.highWorkHomidity" />
            </li>-->
            <li>
              <span>最大功率</span>
              <input type="number" v-model="box_template.maxPw" />
            </li>
            <li>
              <span>长（厘米）</span>
              <input type="number" v-model="box_template.dimL" />
            </li>
            <li>
              <span>宽（厘米）</span>
              <input type="number" v-model="box_template.dimW" />
            </li>
            <li>
              <span>高（厘米）</span>
              <input type="number" v-model="box_template.dimH" />
            </li>
            <li>
              <span>重量</span>
              <input type="number" v-model="box_template.weight" />
            </li>
            <div v-if=" path!='/BroadcastingEquipment'">
              <div v-if="id==1&&Distinguish==3 ?true:false">
                <li>
                  <div
                    v-for="(item,index) in
                          weatherSensorList"
                    :key="index"
                  >
                    <span>气象传感器</span>
                    <input type="text" v-model="item.name" disabled />
                    <i @click="weatherSensor_remove(item,index)" class="el-icon-circle-close"></i>
                  </div>
                </li>
                <li class="new">
                  <span>气象传感器</span>
                  <i
                    v-for="(item,index) in Meteorological_list"
                    :key="index"
                    @click="Meteorological_add(item,index)"
                  >
                    <b title="点击添加气象传感器">{{item.name}}</b>
                  </i>
                </li>
                <li>
                  <div v-for="(item,index) in lampList " :key="index">
                    <span>单灯控制器</span>
                    <input type="text" v-model="item.name" disabled />
                    <i @click="lamp_remove(item,index)" class="el-icon-circle-close"></i>
                  </div>
                </li>
                <li class="new">
                  <span>单灯控制器</span>
                  <i v-for="(item,index) in lamp_list" :key="index" @click="lamp_add(item,index)">
                    <b title="点击添加单灯控制器">{{item.name}}</b>
                  </i>
                </li>
                <li>
                  <div v-for="(item,index) in   wifiList " :key="index">
                    <span>WIFI-AP</span>
                    <input type="text" v-model="item.name" disabled />
                    <i @click="wifi_remove(item,index)" class="el-icon-circle-close"></i>
                  </div>
                </li>
                <li class="new">
                  <span>WIFI-AP</span>
                  <i v-for="(item,index) in wifi_list" :key="index" @click="wifi_add(item,index)">
                    <b title="点击添加WIFI-AP">{{item.name}}</b>
                  </i>
                </li>
                <li>
                  <div v-for="(item,index) in screenList" :key="index">
                    <span>显示屏</span>
                    <input type="text" v-model="item.name" disabled />
                    <i @click="screen_remove(item,index)" class="el-icon-circle-close"></i>
                  </div>
                </li>
                <li class="new">
                  <span>显示屏</span>
                  <i
                    v-for="(item,index) in screen_list"
                    :key="index"
                    @click="screen_add(item,index)"
                  >
                    <b title="点击添加显示屏">{{item.name}}</b>
                  </i>
                </li>
              </div>
              <div v-if="id==0?true:false">
                <li>
                  <div v-for="(item,index) in box_template.elecLoops" :key="index">
                    <span>回路{{index+1}}</span>
                    <input type="text" v-model="item.name" disabled />
                    <i @click="remove_loop(item,index)" class="el-icon-circle-close"></i>
                  </div>
                </li>
                <li class="new">
                  <span>回路</span>
                  <i v-for="(item,index) in loop_list" :key="index" @click="box_add(item,index)">
                    <b>{{item.name}}</b>
                  </i>
                </li>
              </div>
            </div>

            <div v-if="id==1 && path=='/BroadcastingEquipment'">
              <li>
                <div v-for="(item,index) in centerControlList" :key="index">
                  <span>中端控制{{index+1}}</span>
                  <input type="text" v-model="item.name" disabled />
                  <i @click="center_control_add(item,index)" class="el-icon-circle-close"></i>
                </div>
              </li>
              <li class="new">
                <span>中端控制</span>
                <i
                  v-for="(item,index) in center_control_list"
                  :key="index"
                  @click="remove_center_control(item,index)"
                >
                  <b>{{item.name}}</b>
                </i>
              </li>

              <li>
                <div v-for="(item,index) in soundPostList" :key="index">
                  <span>IP音柱{{index+1}}</span>
                  <input type="text" v-model="item.name" disabled />
                  <i @click="sound_postList_add(item,index)" class="el-icon-circle-close"></i>
                </div>
              </li>
              <li class="new">
                <span>IP音柱</span>
                <i
                  v-for="(item,index) in sound_postList"
                  :key="index"
                  @click="remove_sound_postList(item,index)"
                >
                  <b>{{item.name}}</b>
                </i>
              </li>

              <li>
                <div v-for="(item,index) in talkDevList" :key="index">
                  <span>IP对讲{{index+1}}</span>
                  <input type="text" v-model="item.name" disabled />
                  <i @click="talkDevList_add(item,index)" class="el-icon-circle-close"></i>
                </div>
              </li>
              <li class="new">
                <span>IP对讲</span>
                <i
                  v-for="(item,index) in talk_devList"
                  :key="index"
                  @click="remove_talkDevList(item,index)"
                >
                  <b>{{item.name}}</b>
                </i>
              </li>
            </div>
          </ul>
          <div class="btn">
            <el-button @click="Electric_box_template_addition">{{Establish}}</el-button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 设备新建 -->
    <transition name="el-fade-in-linear">
      <div class="Mask" v-show="electric_box_template">
        <div class="New_template">
          <div class="tips">
            {{Establish}}
            <i class="el-icon-close" @click="Close"></i>
          </div>
          <div class="switch">
            <span :class="{fill}" @click="tab_fill" v-show="fill_show">填写信息</span>
            <span
              :class="{Already_existing}"
              @click="tab_Already_existing"
              v-show="Already_existing_show"
            >关联已有模板</span>
          </div>
          <div v-show="fill">
            <ul class="Roll">
              <li>
                <span>名称</span>
                <input type="text" v-model="box_template.name" />
              </li>
              <li v-if="Distinguish ==3 ? true:false">
                <div v-for="(item,index) in box_template.elecLoops" :key="index">
                  <span>{{path=='/LampEquipmentLibrary'?'单灯控制器':'回路' }} 关联的回路{{index+1}}</span>
                  <input type="text" v-model="item.name" disabled />
                </div>
              </li>

              <li>
                <span>最大回路数</span>
                <input type="number" v-model="box_template.maxLoopNum" />
              </li>
              <li>
                <span>输入电压</span>
                <input type="number" v-model="box_template.inputVolt" />
              </li>

              <li>
                <span>最大功率</span>
                <input type="number" v-model="box_template.maxPw" />
              </li>
              <li>
                <span>长（厘米）</span>
                <input type="number" v-model="box_template.dimL" />
              </li>
              <li>
                <span>宽（厘米）</span>
                <input type="number" v-model="box_template.dimW" />
              </li>
              <li>
                <span>高（厘米）</span>
                <input type="number" v-model="box_template.dimH" />
              </li>
              <li>
                <span>重量</span>
                <input type="number" v-model="box_template.weight" />
              </li>

              <div v-if="Distinguish==2?false:true">
                <li v-show="Distinguish != 0 ? true:false">
                  <span>供电来源</span>
                  <input type="text" v-model="box_template.pwSource" />
                </li>
                <li v-show="Distinguish != 0 ? true:false" class="map">
                  <span>经度</span>
                  <input type="number" v-model="box_template.lng" />
                  <!-- <label class="el-icon-location-information" @click="map"></label> -->
                </li>
                <li v-show="Distinguish != 0 ? true:false" class="map">
                  <span>纬度</span>
                  <input type="number" v-model="box_template.lat" />
                  <!-- <label class="el-icon-location-information" @click="map"></label> -->
                </li>
                <div v-if=" path!='/BroadcastingEquipment'">

                <div v-if="id==0 ?true:false">
                  <li v-if="Distinguish !=0 ? true:false">
                    <span>回路</span>
                    <el-select v-model="loops" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in loop_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>
                </div>
                <div></div>
                <div v-if="id==1 &&Distinguish==1?true:false">
                  <li>
                    <span>气象传感器</span>
                    <el-select v-model="weatherSensorList" multiple  collapse-tags filterable placeholder="请选择">
                      <el-option
                        v-for="item in Meteorological_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>

                  <li>
                    <span>单灯控制器</span>
                    <el-select v-model="lampList" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in lamp_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>

                  <li>
                    <span>WIFI-AP</span>
                    <el-select v-model="wifiList" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in wifi_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>
                  <li>
                    <span>显示屏</span>
                    <el-select v-model="screenList" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in screen_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>
                </div>

                <div v-if="Distinguish==0? false:true">
                  <li v-if="Distinguish ==3 ? true:false">
                    <span>设备厂商</span>
                    <input type="text" v-model="box_template.vendorDev.name" disabled />
                  </li>
                  <li v-show="path=='/LampEquipmentLibrary'?false:true">
                    <span>归属建筑</span>
                    <el-select v-model="box_template.buildType" placeholder="请选择">
                      <el-option
                        v-for="item in Architecture"
                        :key="item.buildType"
                        :label="item.name"
                        :value="item.buildType"
                      ></el-option>
                    </el-select>
                  </li>
                </div>
                </div>

                <div v-if="id==1 && path=='/BroadcastingEquipment'">
                  <li>
                    <span>中端控制</span>
                    <el-select v-model="centerControlList" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in center_control_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>


                   <li>
                    <span>IP音柱</span>
                    <el-select v-model="soundPostList" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in sound_postList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>

                
                   <li>
                    <span>IP对讲</span>
                    <el-select v-model="talkDevList" multiple  collapse-tags filterable placeholder="可以多选">
                      <el-option
                        v-for="item in talk_devList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li>


                </div>
              </div>
            </ul>
            <div class="btn">
              <el-button @click="Electric_box_template_addition">{{Establish}}</el-button>
            </div>
          </div>
          <div v-show="Already_existing" class="temp">
            <div>
              <span>请选择关联的模板</span>
              <input type="text" v-model="DeviceCommunication_name" @focus="binding" />
              <ul class="box_drop-down">
                <li
                  v-for="(item,index) in DeviceCommunication_table"
                  :key="index"
                  @click="DeviceCommunication_copy(item)"
                  v-show="Choice"
                  class="drop-down"
                >{{item.name}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import MpaPosition from "../position";
import headTitle from "@/views/title";
import tableList from "../list/tableList";
export default {
  props: ["id", "Crumbs", "EQName"],
  components: {
    MpaPosition,
    headTitle,
    tableList
  },
  data() {
    return {
      value: "1",
      isRouterAlive: false,
      options: [
        {
          value: "路灯",
          id: 1
        },
        {
          value: "wifi",
          id: 2
        },
        {
          value: "气象传感器",
          id: 3
        }
      ],
      path: "",
      Architecture: [
        { name: "住宅", buildType: 0 },
        { name: "学校", buildType: 1 },
        { name: "医院", buildType: 2 },
        { name: "公共建筑", buildType: 3 },
        { name: "商业建筑", buildType: 4 },
        { name: "桥体", buildType: 5 }
      ],
      communication_list: [],
      // ++++++++++++++++++++++分界线以后重构++++++++++++++++++++++++
      activeName2: "ElectricBox", //设备切换
      tab_activeName: "device_details", //详情 切换
      //   id: 0, //通讯的默认值
      Electric_box_table: [], //电箱详情表格
      electric_box_template: false, //新建电箱模板弹出框
      fill: true, //填写模板类名
      Already_existing: false, //关联已有模板
      tmp: [],
      // 电箱模板添加
      box_template: {
        lng: null,
        lat: null,
        vendorDev: {},
        elecLoops: []
      },
      loops: [],
      // 回路模板添加
      page: 1, //页码
      size: 10, // 条数
      total: 0,
      fill_show: true, //模板添加和电箱设备添加的显示
      Already_existing_show: true, //模板添加  和电箱设备添加的显示
      Distinguish: 0, //用于区分是添加模板还是添加设备
      Establish: "", //创建设备  /  创建模板
      search: "",
      show: true, //新建设备 模板名称 和设备名称隐藏
      Electric_box_equipment_table: [], //电箱设备详情
      Controller_equipment_table: [], //设备控制器详情????
      Relation_Signal_tpl_name: "",
      Choice: false,
      loop_list: [], //电箱关联回路
      DeviceCommunication_name: "", //电箱关联模板显示名字
      modify_btn: 0,
      update_box_EQ: false, //电箱设备修改
      DeviceCommunication_table: [],
      mapShow: false,
      loop_Type: {
        devType: "0",
        imcType: "0"
      },
      lamp_Type: {
        devType: 1,
        imcType: 1
      },
      ML_Type: {
        devType: 1,
        imcType: 2
      },
      screen_Type: {
        devType: 1,
        imcType: 3
      },
      wifi_Type: {
        devType: 1,
        imcType: 4
      },
      camera_Type: {
        devType: 1,
        imcType: 5
      },
      Console_Type: {
        devType: 1,
        imcType: 7
      },
      sound_Type: {
        devType: 1,
        imcType: 8
      },
      IP_Type: {
        devType: 1,
        imcType: 9
      },

      Meteorological_list: [], //循环的列表
      lamp_list: [],
      wifi_list: [],
      screen_list: [],
      weatherSensorList: [], //气象传感器添加字段
      lampList: [], //路灯添加字段
      screenList: [], //广播添加字段
      wifiList: [], //wifi添加字段
      arr: [],
      Console_list: [], //主控太表格
      center_control_list: [],
      centerControlList: [],
      sound_postList: [],
      soundPostList: [],
      talk_devList: [],
      talkDevList: []

      
    };
  },
  // created() {
  // },
  mounted() {
    // 设备厂商
    this.res_equipment();
    this.path = this.$route.path;
  },
  methods: {
    tabList(e) {
      if (e.name == "Console" || e.name == "sound" || e.name == "IP") {
        this.isRouterAlive = true;
      }
    },
    // 移除关联的气象
    weatherSensor_remove(item, index) {
      this.weatherSensorList.splice(index, 1);
      this.Meteorological_list.push(item);
    },
    // 添加关联的气象
    Meteorological_add(item, index) {
      this.weatherSensorList.push(item);
      this.Meteorological_list.splice(index, 1);
    },
    lamp_remove(item, index) {
      this.lampList.splice(index, 1);
      this.lamp_list.push(item);
    },
    lamp_add(item, index) {
      this.lamp_list.splice(index, 1);
      this.lampList.push(item);
    },
    wifi_remove(item, index) {
      this.wifiList.splice(index, 1);
      this.wifi_list.push(item);
    },
    wifi_add(item, index) {
      this.wifi_list.splice(index, 1);
      this.wifiList.push(item);
    },
    screen_remove(item, index) {
      this.screenList.splice(index, 1);
      this.screen_list.push(item);
    },
    screen_add(item, index) {
      this.screen_list.splice(index, 1);
      this.screenList.push(item);
    },

    center_control_add(item, index) {
      this.centerControlList.splice(index, 1);
      this.center_control_list.push(item);
    },
    remove_center_control(item, index) {
      this.center_control_list.splice(index, 1);
      this.centerControlList.push(item);
    },

    sound_postList_add(item, index) {
      this.soundPostList.splice(index, 1);
      this.sound_postList.push(item);
    },

    remove_sound_postList(item, index) {
      this.sound_postList.splice(index, 1);
      this.soundPostList.push(item);
    },

    talkDevList_add(item, index) {
      this.talkDevList.splice(index, 1);
      this.talk_devList.push(item);
    },
    remove_talkDevList(item, index) {
      this.talk_devList.splice(index, 1);
      this.talkDevList.push(item);
    },

    put_EQ(e) {
      this.loopSensor(0);
      this.lampSensor(1);
      this.screenSensor(3);
      this.wifiSensor(4);
      this.MeteorologicalSensor(2);
      this.centerControSensor(7);
      this.soundPostSensor(8);
      this.talkDevSensor(9);
      this.res_equipment();
      this.box_template.loops = [];
      this.box_template.vendorDev = {};
      this.box_template.elecLoops = [];
      this.Establish = "修改";
      this.update_box_EQ = true;
      this.Distinguish = 3;
      this.$http
        .get(`/api/threesuns/device/get`, {
          params: {
            id: e.id,
            devType: this.id
          }
        })
        .then(res => {
          this.box_template = res.data.data;
          this.weatherSensorList = res.data.data.weatherSensorList;
          this.weatherSensorList = e.weatherSensorList;
          this.lampList = e.lampList;
          this.wifiList = e.wifiList;
          this.screenList = e.screenList;
          this.centerControlList = e.centerControlList;
          this.soundPostList = e.soundPostList;
          this.talkDevList = e.talkDevList;

          if (!res.data.data.elecLoops) {
            this.box_template.elecLoops = [];
          }
          if (!res.data.data.loops) {
            this.box_template.loops = [];
          }
          if (!res.data.data.vendorDev) {
            this.box_template.vendorDev = {};
          }
        
          
        });
    },
    tab() {
      if (this.activeName2 == "ElectricBox") {
        this.id = 0;
      } else {
        this.id = 1;
      }
    },
    map() {
      this.mapShow = true;
    },
    position(e) {
      this.box_template.lng = e.lng;
      this.box_template.lat = e.lat;
    },
    box_add(item, index) {
      this.box_template.elecLoops.push(item);
      this.loop_list.splice(index, 1);
    },
    remove_loop(item, index) {
      this.loop_list.push(item);
      this.box_template.elecLoops.splice(index, 1);
    },
    // 模板修改修改封装
    fun_tpl(url, obj) {
      this.$http
        .put(url, obj)
        .then(res => {
          if ((res.data.code = "200")) {
            this.$message.success(res.data.message);
            this.Close();
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch(err => {
          console.log(res);
        });
    },
    loopSensor(type) {
      this.loop(type).then(res => {
        this.loop_list = res.data.data;
      });
    },
    lampSensor(type) {
      this.loop(type).then(res => {
        this.lamp_list = res.data.data;
      });
    },
    screenSensor(type) {
      this.loop(type).then(res => {
        this.screen_list = res.data.data;
      });
    },
    wifiSensor(type) {
      this.loop(type).then(res => {
        this.wifi_list = res.data.data;
      });
    },
    MeteorologicalSensor(type) {
      this.loop(type).then(res => {
        this.Meteorological_list = res.data.data;
      });
    },
    // 主控台

    centerControSensor(type) {
      this.loop(type).then(res => {
        this.center_control_list = res.data.data;
      });
    },
    soundPostSensor(type) {
      this.loop(type).then(res => {
        // this.soundPostList = res.data.data;
        this.sound_postList = res.data.data; 

      });
    },

    talkDevSensor(type) {
      this.loop(type).then(res => {
        this.talk_devList = res.data.data;
      });
    },

    // 可关联的设备
    async loop(type) {
      return await this.$http.get("/api/threesuns/device/getAllLoops", {
        params: {
          // devType: this.id, //请求设备类型
          imcType: type,
          deviceName: "" //搜索的值
        }
      });
    },
    binding() {
      this.Choice = true;
    },
    // 电箱回显
    DeviceCommunication_copy(val) {
      this.DeviceCommunication_name = val.name;
      this.box_template.dimH = val.dimH;
      this.box_template.dimL = val.dimL;
      this.box_template.dimW = val.dimW;
      this.box_template.inputVolt = val.inputVolt;
      this.box_template.maxLoopNum = val.maxLoopNum;
      this.box_template.maxPw = val.maxPw;
      this.box_template.name = val.name;
      this.box_template.vendorDev = val.vendorDev;
      this.box_template.weight = val.weight;
      this.box_template.workHumidity = val.workHumidity;
      this.box_template.workHumidity = val.workHumidity;
      this.box_template.workTemp = val.workTemp;
    },
    // 分页
    handleSizeChange(val) {
      this.size = val;
      // 用来判断是设备详情还是模板详情
      if (this.tab_activeName == "device_details") {
        this.res_equipment();
        // ------各个关联的设备----
        // this.communication();
        // this.strategy_list();
        // this.equipment();
        // this.loop();
      } else {
        this.res_Device_box();
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      if (this.tab_activeName == "device_details") {
        this.res_equipment();
      } else {
        this.res_Device_box();
      }
    },
    // tab切换事件(设备切换事件)
    handleClick(e) {
      let judge = e.label;
      if (judge == "电箱") {
        this.page = 1;
        this.id = 0;
        // 模板详情
        this.search = "";
        this.res_equipment();
        this.Manufacturer();
      }
      this.Already_existing = false;
      this.fill = true;
      this.tab_activeName = "device_details";
    },
    as(e) {},
    //修改
    Close_update(e) {
      //  电箱
      this.update_box_EQ = false;
      this.mapShow = false;
      if (!this.update_box_EQ) {
        for (const key in this.box_template) {
          this.box_template[key] = "";
        }
        this.box_template.vendorDev = {};
        this.box_template.loops = [];
        this.weatherSensorList = [];
        this.lampList = [];
        this.screenList = []; //广播添加字段
        this.wifiList = [];
        this.centerControlList=[]
          this.soundPostList=[]
          this.talkDevList=[]
      }
    },
    // 模板详情
    res_Device_box() {
      this.$http
        .get(`/api/threesuns/tmpl/list/get`, {
          params: {
            devType: this.id,
            page: this.page - 1,
            size: this.size,
            tmplName: this.search
          }
        })
        .then(res => {
          // this.page = 0;
          this.DeviceCommunication_table = res.data.data;
          this.strategy_tpl = res.data.data;
          this.loop_table = res.data.data;
          this.Electric_box_table = res.data.data;
          this.Signal_table = res.data.data;
          this.total = res.data.total;
        });
    },
    // 电箱的搜索查询
    search_query() {
      // 用来判断 执行设备搜索还是模板搜索
      this.page = 1;
      if (this.tab_activeName == "device_details") {
        this.res_equipment();
      } else {
        this.res_Device_box();
      }
    },
    // 修改电箱弹窗
    put_tpl(a) {
      this.loops = [];
      this.Distinguish = 2;
      this.box_template = a;
      this.Establish = "修改";
      this.Already_existing_show = false;
      this.electric_box_template = true;
      this.box_template.elecLoops = [];
      this.box_template.loops = [];
    },
    // 电箱模板新建 弹框
    new_Device_box() {
      //用于区分是添加模板还是添加设备
      this.Distinguish = 0;
      this.Close_update();
      // 防止出现关联模板
      this.tab_fill();
      this.Establish = "新建模板";
      this.Already_existing_show = false;
      this.electric_box_template = true;
    },

    // 电箱模板添加
    Electric_box_template_addition() {
      this.box_template.loops = this.loops;
      this.box_template.devType = this.id;
      this.box_template.weatherSensorList = this.weatherSensorList;
      this.box_template.lampList = this.lampList;
      (this.box_template.screenList = this.screenList), //广播添加字段
        (this.box_template.wifiList = this.wifiList);
      this.box_template.centerControlList = this.centerControlList;

      this.box_template.soundPostList = this.soundPostList;
      this.box_template.talkDevList = this.talkDevList;
      //   判断是执行添加模板  还是添加设备
      // 0是新建电箱模板  1是新建电箱设备 2是模板修改 3是设备修改
      if (this.Distinguish == 0) {
        this.Already_existing = false;
        //  对象                   请求地址            关闭的弹窗      重新渲染的数据
        this.fun(this.box_template, "/api/threesuns/tmpl/create", this.Close());
        // 执行添加设备
      } else if (this.Distinguish == 1) {
        this.$http
          .post("/api/threesuns/device/create", this.box_template)
          .then(res => {
            if (res.data.code == "200") {
              // this.box_template={}
              for (const key in this.box_template) {
                this.box_template[key] = "";
              }
              this.box_template.vendorDev = {};
              this.box_template.elecLoops = [];
              this.box_template.loops = [];
              this.box_template.lampList = [];
              this.box_template.screenList = [];
              this.box_template.wifiList = [];
              this.box_template.weatherSensorList = [];
              this.box_template.centerControlList = [];
              this.box_template.soundPostList = [];
              this.box_template.talkDevList = [];
              this.$message.success(res.data.message);
              this.Close();
            } else {
              this.$message.success(res.data.message);
            }
          });
      } else if (this.Distinguish == 2) {
        this.fun_tpl("/api/threesuns/tmpl/update", this.box_template);
      } else if (this.Distinguish == 3) {
        var elecLoopsArr = [];
        for (var i = 0; i < this.box_template.elecLoops.length; i++) {
          elecLoopsArr.push(this.box_template.elecLoops[i].id);
        }
        this.box_template.elecLoops = elecLoopsArr;
        var weatherSensorArr = [];
        if (!this.box_template.weatherSensorList) {
          this.box_template.weatherSensorList = [];
        }
        if (!this.box_template.lampList) {
          this.box_template.lampList = [];
        }
        if (!this.box_template.wifiList) {
          this.box_template.wifiList = [];
        }
        if (!this.box_template.screenList) {
          this.box_template.screenList = [];
        }
        if(!this.box_template.centerControlList){
           this.box_template.centerControlList=[]
        }
        if(!this.box_template.soundPostList) {
          this.box_template.soundPostList=[]
        }
        if(!this.box_template.talkDevList){
          this.box_template.talkDevList=[]
        }
        for (var i = 0; i < this.box_template.weatherSensorList.length; i++) {
          weatherSensorArr.push(this.box_template.weatherSensorList[i].id);
        }
        this.box_template.weatherSensorList = weatherSensorArr;

        var lampArr = [];
        for (var i = 0; i < this.box_template.lampList.length; i++) {
          lampArr.push(this.box_template.lampList[i].id);
        }
        this.box_template.lampList = lampArr;

        var wifiArr = [];
        for (var i = 0; i < this.box_template.wifiList.length; i++) {
          wifiArr.push(this.box_template.wifiList[i].id);
        }
        this.box_template.wifiList = wifiArr;
        var screenArr = [];

        for (var i = 0; i < this.box_template.screenList.length; i++) {
          screenArr.push(this.box_template.screenList[i].id);
        }
        this.box_template.screenList = screenArr;

        var centerControlArr = [];

        for (var i = 0; i < this.box_template.centerControlList.length; i++) {
          centerControlArr.push(this.box_template.centerControlList[i].id);
        }
        this.box_template.centerControlList = centerControlArr;


        var soundPostList = [];
        for (var i = 0; i < this.box_template.soundPostList.length; i++) {
          soundPostList.push(this.box_template.soundPostList[i].id);
        }

        this.box_template.soundPostList = soundPostList;

        var talkDevList = [];
        for (var i = 0; i < this.box_template.talkDevList.length; i++) {
          talkDevList.push(this.box_template.talkDevList[i].id);
        }
        this.box_template.talkDevList = talkDevList;
        this.fun_EQ("/api/threesuns/device/update", this.box_template);
      }
    },
    funID(item) {
      var arr = [];
      for (var i = 0; i < item.length; i++) {
        arr.push(item[i].id);
      }
      return arr;
    },

    // 新建设备模板参数的封装
    fun(obj, url, Methods, Refresh) {
      // for (const key in obj) {
      //   if (obj[key] == null || obj[key] == "") {
      //     this.$message.error(key + "不可为空");
      //     return;
      //   }
      // }
      this.$http
        .post(url, obj)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.Close_update();
            // for (const key in obj) {
            //   obj[key] = null;
            // }
            Methods;
            if (this.Distinguish == 0) {
              this.res_Device_box();
            } else if (this.Distinguish == 1) {
              // 请求设备详情
              this.res_equipment();
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 新建设备
    New_electric_box_equipment() {
      this.Close_update();
      this.loops = [];
      // this.loop();
      this.loopSensor(0);
      this.lampSensor(1);
      this.screenSensor(3);
      this.wifiSensor(4);
      this.MeteorologicalSensor(2);
         this.centerControSensor(7);
      this.soundPostSensor(8);
      this.talkDevSensor(9);
      this.Establish = "新建设备";
      this.search = "";
      //用于区分是添加模板还是添加设备
      this.Distinguish = 1;
      this.electric_box_template = true;
      this.Already_existing_show = true;
      this.size = 9999;
      this.res_Device_box();
    },
    CloseMap() {
      this.mapShow = false;
    },
    // 关闭弹窗
    Close() {
      this.electric_box_template = false;
      this.Device_communication_template = false;
      this.mapShow = false;
      // 关闭弹窗之后重新显示一页显示的数据
      this.size = 10;
      if (this.Distinguish == 0) {
        this.res_Device_box();
      } else if (this.Distinguish == 1) {
        this.res_equipment();
      } else if (this.Distinguish == 2) {
        this.res_Device_box();
      } else if (this.Distinguish == 3) {
        this.res_equipment();
      }
      // 要关联的设备 关闭弹窗之后请求一次 预防 设备没有加载过来
      // this.loop();
      this.loopSensor(0);
      this.lampSensor(1);
      this.screenSensor(3);
      this.wifiSensor(4);
      this.MeteorologicalSensor(2);
   this.centerControSensor(7);
      this.soundPostSensor(8);
      this.talkDevSensor(9);
    },
    // 填写新的模板切换
    tab_fill() {
      this.fill = true;
      this.Already_existing = false;
    },
    // 关联已有模板切换
    tab_Already_existing() {
      // this.Distinguish=1
      this.Already_existing = true;
      this.fill = false;
    },
    //设备厂商获取
    Manufacturer() {
      this.$http
        .get("/api/threesuns/vendorDev/getList", {
          params: {
            devType: this.id
          }
        })
        .then(res => {
          this.Vendor_selectionres = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 设备修改
    fun_EQ(url, obj) {
      this.$http
        .put(url, obj)
        .then(res => {
          if (res.data.code == "200") {
            this.box_template.elecLoops = [];
            this.Close_update();
            this.$message.success(res.data.message);
            this.res_equipment();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    //每一次切换都要重新加载数据 以防总条数不对
    tab_handleClick(e) {
      this.page = 1;
      // 通信模板的请求
      // this.res_Device_box()
      if (e.label == "设备详情") {
        this.search = "";
        this.res_equipment();
      } else {
        this.search = "";
        this.res_Device_box();
      }
    },
    // --------删除--------
    Device_deletion(e) {
      //删除设备
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.tab_activeName == "device_details") {
            this.$http
              .delete("/api/threesuns/device/delete", {
                params: {
                  ids: e.id,
                  devType: this.id
                }
              })
              .then(res => {
                if (res.data.code == 200) {
                  this.$message.success(res.data.message);
                  this.res_equipment();
                  this.$message.success(res.data.message);
                } else {
                  this.$message.error(res.data.message);
                }
              });
          } else {
            this.$http
              .delete("/api/threesuns/tmpl/delete", {
                params: {
                  ids: e.id,
                  devType: this.id
                }
              })
              .then(res => {
                if (res.data.code == 200) {
                  this.res_Device_box();
                  this.$message.success(res.data.message);
                } else {
                  this.$message.error(res.data.message);
                }
              })
              .catch(err => {
                this.$message.error(err);
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 设备详情
    res_equipment() {
      this.$http
        .get("/api/threesuns/device/list/get", {
          params: {
            page: this.page - 1,
            size: this.size,
            devType: this.id,
            deviceName: this.search
          }
        })
        .then(res => {
          this.Electric_box_equipment_table = res.data.data;
          this.arr = res.data.data.weatherSensorList;
          this.total = res.data.total;
        });
    }
  }
};
</script>

<style scoped>
@import url("../../../assets/css/table.css");
.el-icon-location-information {
  color: #fff;
  position: absolute;
  font-size: 16px;
  right: 10%;
  bottom: 0;
}
.map {
  position: relative;
}

.box {
  width: 100%;
  height: 100%;
  /* background: url("../../../assets/image/strategy_add.jpg"); */
  min-width: 1300px;
  overflow: auto;
  position: relative;
}
.MpaPosition {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 50px;
  z-index: 5;
}
.MpaPosition .title {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
}
.container {
  /* width: 1580px; */
  width: 99%;
  height: 99%;
  margin: 0 auto;
  /* overflow: hidden; */
  box-sizing: border-box;
  min-width: 1300px;
}
.MpaPosition span {
  position: absolute;
  right: 15px;
  top: 10px;
}
.el-icon-close {
  font-size: 18px;
}
span:hover {
  cursor: pointer;
}
.headTitle {
  width: 100%;
  margin-bottom: 35px;
}
.nav {
}
/* 左边导航栏 */
.sidebar {
  width: 300px;
  height: 800px;
  float: left;
  border: 1px solid #ffffff;
  box-shadow: 0px 5px 29px 0px #0dc2c3 inset;
  background-color: #011615;
}
.classification {
  width: 200px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  margin: 0 auto;
  margin-top: 60px;
  box-shadow: 0px 5px 29px 0px #0dc2c3 inset;
}
.classification li {
  height: 35px;
  line-height: 35px;
  margin-bottom: 20px;
  background-color: #26aea1;
}
.title {
  width: 100%;
  background-color: #1d938d;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0px 0px 8px 0px #ffffff inset;
  position: relative;
}
.sidebar :hover {
  cursor: pointer;
}
/* 右边内容 */
.submenu {
  height: 860px;
  /* float: left; */
  border: 1px solid #ffffff;
  margin-left: 30px;
  /* overflow: hidden; */
  background-color: #011615;
  margin: 0 auto;
}
/* 切换 */
/deep/ .el-tabs__item {
  /* padding: 0 80px; */
  /* width: 232px; */
}
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
  display: flex;
  border-radius: 0;
  padding: 0;
}
/deep/ .el-tabs__active-bar {
  /* width: 770px !important; */
  width: 100% !important;
}
/deep/ .el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2) {
  /* padding-left: 85px; */
  padding: 0;
}
/deep/ .el-tabs--top.el-tabs--card .el-tabs__item:last-child {
  /* padding-right: 87px; */
  padding: 0;
  border-left: 1px solid #fff;
}
/deep/ .el-tabs__nav-wrap.is-scrollable {
  padding: 0;
}
/deep/ .el-tabs__nav-prev,
/deep/ .el-tabs__nav-next {
  display: none;
}
/deep/ .el-tabs__nav {
  /* float: none; */
  /* display: inline-block; */
  width: 100%;
}
/* fiex */

/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

/deep/ .el-pager li.active,
/deep/ .el-pager li {
  background: #011615;
}
/deep/ .el-table td {
  text-align: center;
  color: #c5c5c5;
  font-size: 16px;
}
/deep/ .el-table th {
  height: 40px;
  font-size: 18px;
  text-align: center;
  background-color: #055555;
  color: #fff;
}
.equipment {
  height: 680px;
  overflow: hidden;
}
.equipment /deep/ .el-tabs__item {
  width: 50%;
}
.operation {
  height: 50px;
  border-bottom: 1px solid #cccc;
  padding-left: 50px;
}

/deep/ .el-tabs__item {
  /* width: 50%; */
  flex: 1;
  text-align: center;
}
.operation input {
  height: 30px;
  width: 300px;
  outline: none;
  padding-left: 25px;
  /* padding-left: 30px; */
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  border: 1px solid #fff;
  margin-right: 20px;
  color: #fff;
}
.select {
  display: inline-block;
}
.select /deep/ .el-input {
  background-color: #0dc2c3;
}
/deep/ .el-select {
  border-radius: 12px;
}
/deep/ .el-button {
  background-color: #0dc2c3;
  color: #fff;
}
/deep/ .el-button--primary :active {
  border: none;
}
.operation .el-button + .el-button {
  margin-left: 30px;
}
.operation .el-button {
  padding: 9px 20px;
}
.tab {
  padding-top: 20px;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}
.tab span {
  font-size: 14px;
  display: inline-block;
  margin-left: 20px;
}

/deep/ .el-tabs__item {
  height: 40px;
  line-height: 40px;
}
.Device_box {
  height: 460px;
  padding-top: 10px;
  /* overflow-y: scroll; */
}
.Device_box ul {
  width: 950px;
  float: left;
  overflow: hidden;
}
.Device_box li {
  float: left;
  width: 170px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  background-color: #ccc;
  margin-left: 15px;
  margin-bottom: 10px;
}
.Device_name {
  width: 200px;
  height: 80px;
  background-color: #ccc;
  text-align: center;
  line-height: 80px;
  float: left;
}
.block {
  width: fit-content;
  margin: 0 auto;
}

/* 新建模板 */
.Mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  overflow: hidden;
}
.New_template {
  width: 620px;
  height: 641px;
  margin: 200px auto;
  background-color: #011615;
  transform: translateX(150px);
}
.tips {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  padding-left: 40px;
  background-color: #1d938d;
  color: #ffffff;
}
.tips i {
  float: right;
  margin-top: 18px;
  margin-right: 30px;
}
.tips :hover {
  cursor: pointer;
}
.switch {
  height: 40px;
  line-height: 40px;
  /* border-bottom: 1px solid #3982db; */
  overflow: hidden;
  border: 1px solid #fff;
}

.switch span:last-child {
  /* border-left: 1px solid #fff; */
}
.switch span {
  float: left;
  width: 50%;
  text-align: center;
  color: #fff;
}
.switch .Already_existing {
  color: #0dc2c3;
  background-color: #187970;
}
.switch .fill {
  color: #0dc2c3;
  background-color: #187970;
}
.switch :hover {
  cursor: pointer;
}
.New_template ul {
  /* width: 600px;
  padding-left: 3px; */
  padding-left: 3px;
  height: 409px;
}
.New_template li {
  float: left;
  margin-top: 40px;
  text-align: center;
  width: 50%;
}
.New_template li span {
  display: inline-block;
  width: 90px;
  height: 30px;
  /* border: 1px solid #cccccc; */
  background-color: #092728;
  line-height: 30px;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.New_template input {
  width: 100px;
  background: none;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  text-align: center;
  vertical-align: bottom;
  font-size: 14px;
  color: #fff;
}
.btn {
  width: 100px;
  height: 40px;
  margin: 38px auto;
}
.temp {
  padding-top: 30px;
  padding-left: 30px;
  font-size: 16px;
  color: #0dc2c3;
}
/deep/ ul .el-input__inner {
  vertical-align: text-bottom;
  height: 30px;
  background: none;
  line-height: 30px;
  border-radius: 0;
  width: 100px;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 0;
  padding-left: 14px;
  color: #fff;
}
/deep/ .New_template .el-input__suffix {
  display: none;
}

.Roll {
  height: 520px;
  overflow-y: scroll;
}
.Roll::-webkit-scrollbar {
  width: 4px;
}
.Roll::-webkit-scrollbar-track {
  /* background: #ccc; */
  background: #011615;
}
.Roll::-webkit-scrollbar-thumb {
  background: #ccc;
}
.Roll li {
  margin-top: 40px;
  text-align: center;
}
.box_drop-down {
  padding: 5px;
}
.box_drop-down :hover {
  cursor: pointer;
}
.drop-down {
  margin-left: -20px;
  background: #0dc2c3;
  padding: 5px;
  margin-top: 10px;
  margin-right: 30px;
  color: #fff;
}
.temp ul li {
  width: fit-content;
}
span {
  font-size: 12px;
}
.Roll :hover {
  cursor: pointer;
}
.Roll .new {
  width: 588px;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}
.new span {
  vertical-align: bottom;
}
.new b {
  font-style: normal;
  display: block;
  margin-left: 10px;
  margin-top: 10px;
  height: 30px;
  line-height: 30px;
  color: #fff;
}
i {
  font-style: normal;
}
/deep/ .el-tabs__active-bar {
  background-color: #fff;
}
/deep/ .el-tabs__item:hover {
  color: #0dc2c3;
}
/deep/ .el-tabs__item.is-active {
  color: #fff;
  background-color: #0a7e7e;
}
/deep/ .el-tabs__item {
  color: #fff;
}
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #0a7e7e;
  /* width: 100%; */
  color: #fff;
  /* box-shadow: 0px 0px 8px 0px #ffffff inset; */
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  width: 20%;
  text-align: center;
}
.Alone /deep/ .el-tabs__item {
  width: 100%;
}
.Alone /deep/ .el-tabs__active-bar {
  width: 100% !important;
}
/deep/ .el-table th.gutter {
  display: table-cell !important;
}
/deep/ .el-table colgroup.gutter {
  display: table-cell !important;
}
i:hover {
  cursor: pointer !important;
  font-size: 20px;
}
.el-icon-circle-close {
  color: #fff;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield;
}
.TitleHead {
  margin-bottom: 35px;
}
/deep/ .el-tabs__item {
  padding: 0;
}
</style>
